<template>
	<view class="">
		<view class="line"></view>
		<view class="bottom">
		  <view class="nav-box">
		    <view class="nav-tab"
		          :class="[home-1===index&&type?'nav-tab-active':'nav-tab-normal']"
		          v-for="(item,index) in list"
		          :key="index"
		          @click="toPage(item.pagePath,index)">
		          <!-- @click="toIndex(index)"> -->
		      <view class="nav-icon">
		        <view class="circle" v-if="index!=2">
		          <image :src="home===index&&type?item.selectedIconPath:item.iconPath"></image>
		        </view>
				  <view class="logo" v-else>
				  	  <image :src="home===index&&type?item.selectedIconPath:item.iconPath"></image>
				  </view>
		      </view>
		      <view class="nav-text" v-if="item.text">
		        {{item.text}}
		      </view>
		    </view>
		  </view>
		</view>
	</view>

</template>

<script>
export default {
  props: {
	  type:Number,
	  home:Number,
  },
  components: {},
  data () {
    return {
	  list: [{
	  	pagePath: "/pages/index/index",
	  	'iconPath': "/static/image/nav1.png",
	  	'selectedIconPath': "/static/image/nav1-active.png",
	  	'text': "首页"
	  }, {
	  	pagePath: "/pages/draw/draw",
	  	'iconPath': "/static/image/nav2.png",
	  	'selectedIconPath': "/static/image/nav2-active.png",
	  	'text': "抽奖"
	  }, {
	  	'iconPath': "/static/image/logo.png",
	  	'selectedIconPath': "/static/image/logo.png",
	  },  {
	  	pagePath: "/pages/fastSeller/fastSeller",
	  	'iconPath': "/static/image/nav3.png",
	  	'selectedIconPath': "/static/image/nav3-active.png",
	  	text: "排名"
	  }, {
	  	pagePath: "/pages/user/user",
	  	'iconPath': "/static/image/nav4.png",
	  	'selectedIconPath': "/static/image/nav4-active.png",
	  	'text': "我的"
	  }]
    }
  },
  onLoad () {

  },
  methods: {
    toPage (url,index) {
		if(this.type==1){
			this.$emit('toIndex', index)
		}else{
			uni.reLaunch({
				url:`/pages/home/home?index=${index}`
			})
			// uni.reLaunch({
			// 	  url:'/pages/home/home'
			// })
		}
    },
  }
}
</script>

<style scoped lang="scss">
$navHeight:84px; //导航栏高度
$navBoxHeight:34px; //导航栏盒子高度，XR系列底部HOME健
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: $navHeight;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
  background: #00412d;
  z-index: 10;
  color: #fff;
  box-sizing: border-box;
  border-radius: 20px 20px 0px 0rpx;
  
  }
.line{
	height: $navHeight+20px;
}
.nav-tab {
  fiex: 1;
  text-align: center;
  width: 100%;
  height: $navHeight;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-icon {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  .circle {
	  width: 35px;
	  height: 35px;
      image {
      width: 100%;
      height: 100%;
    }
  }
  .logo{
	  width: 70px;
	  height: 46px;
  }
}

.nav-icon .iconfont {
  font-size: 20px;
}

.nav-text {
  font-size: 15px;
  font-weight: bold;
  margin-top: 9px;
  // color: $mediumGrey;
  font-weight: 400;
}
.nav-tab-normal {
     .nav-icon {
       display:flex;
	  align-items: center;
	  justify-content: center;
	   }
	  .circle {
	  position: relative;
	  border-radius: 50%;
	}
}
.nav-tab-active .circle {

}

.nav-tab-active .iconfont {
  color: #fff;
}

.nav-tab-active .nav-text {
  // color: $dominantHue;
}
.nav-box {
  /* position: absolute; */
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

	
/*苹果x适配 H5APP*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .bottom {
    height: $navHeight+$navBoxHeight;
  }
  .line{
	   height: $navHeight+$navBoxHeight+20px;
  }
}

/*苹果xs适配 H5APP*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .bottom {
    height: $navHeight+$navBoxHeight ;
  }
  .line{
  	   height: $navHeight+$navBoxHeight+20px;
  }
}

/*苹果xr适配 H5APP*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .bottom {
    height: $navHeight+$navBoxHeight;
  }
  .line{
  	   height: $navHeight+$navBoxHeight+20px;
  }
}


</style>